<template>
  <div id="explicitTag">
    <template v-for="(item, index) in copyLabels">
      <el-button class="tag-name" :key="index" size="mini" round
        >{{ item.labelName }}
        <i
          v-if="isAdmin"
          @click="remove(item, index)"
          class="el-icon-circle-close el-icon--right"
        ></i
      ></el-button>
    </template>
    <del-dialog
      v-if="delDialogData.isShow"
      :del-dialog-data="delDialogData"
      @reasonDel="failRequest"
    >
      <template v-slot:prompt>
        <p class="prompt">确定删除用户的内容标签吗？</p>
      </template>
    </del-dialog>
  </div>
</template>

<script>
import { del } from '@/api/contentTags/content' // 接口
import delDialog from '@common/delDialog' // 删除理由弹窗
export default {
  name: 'explicitTag',
  msg: '作业/作品/生活/帖子/阅读/长视频-显性标签',
  props: ['labels', 'dailgExplicTag', 'showContentId'],
  components: {
    delDialog
  },
  computed: {
    // isAdmin() {
    //   return this.$store.state.user.isAdmin
    // }
    isAdmin() {
      return JSON.parse(localStorage.getItem('userInfo')).isAdmin
    }
  },
  data() {
    return {
      contentId: '',
      copyLabels: [], //复制已打标签
      delDialogData: {
        isShow: false,
        from: 'showTag',
        type: '删除'
      },
      labelOperatorId: '',
      labelId: '',
      index: ''
    }
  },
  watch: {
    labels(newVue, oldVue) {
      let labels = this.labels ? this.labels : []
      this.copyLabels = JSON.parse(JSON.stringify(labels))
      this.contentId = this.showContentId
    }
  },
  mounted() {
    let labels = this.labels ? this.labels : []
    this.copyLabels = JSON.parse(JSON.stringify(labels))
    this.contentId = this.showContentId
  },
  methods: {
    /*删除显性标签*/
    remove(item, index) {
      this.delDialogData.from = 'showTag'
      this.delDialogData.type = '删除'
      this.delDialogData.isShow = true
      let {
        labelId,
        user: { userId: labelOperatorId }
      } = item
      this.labelId = labelId
      this.labelOperatorId = labelOperatorId
      this.index = index
    },
    // 删除请求
    failRequest(reason) {
      this.$confirm(
        `删除理由：${reason} 确定删除用户的内容标签？`,
        '系统提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(() => {
          let obj = {
            labelOperatorId: this.labelOperatorId,
            labelReason: reason
          }
          del(
            this.contentId,
            this.labelId,
            obj,
            (response) => {
              this.$message.success('操作成功')
              this.copyLabels.splice(this.index, 1) //避免页面刷新
            },
            (response) => {
              this.$message.warning(response.message)
            }
          )
        })
        .catch(() => {})
    }
  }
}
</script>

<style lang="less">
#explicitTag {
  margin-top: -8px;
  span {
    font-size: 14px;
  }
  .el-button {
    margin-top: 8px;
  }
  button.el-button.el-button--text {
    margin-right: 10px;
  }
  button.el-button.tag-name {
    white-space: normal;
  }
}
.explicitTagList {
  width: 150px;
  max-height: 150px;
  overflow: auto;
  span.name {
    display: inline-block;
    width: 84px;
    height: 32px;
    line-height: 32px;
    overflow: hidden;
    vertical-align: middle;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .el-dropdown-menu__item {
    padding: 0 10px;
  }
}
</style>
